<template>
  <div class="tools-section">
    <h2 class="section-title">最新上线</h2>
    <div class="tools-grid">
      <div v-for="tool in newTools" :key="tool.id" class="tool-card new-tool">
        <div class="tool-icon">
          <img :src="tool.icon" :alt="tool.name" />
        </div>
        <div class="tool-info">
          <h3 class="tool-name">{{ tool.name }}</h3>
          <p class="tool-desc">{{ tool.description }}</p>
        </div>
        <div class="tool-tag">新品</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Tool {
  id: number
  name: string
  description: string
  icon: string
}

// 可以通过props接收数据或者直接在组件内定义
const props = defineProps<{
  tools?: Tool[]
}>()

const newTools = ref<Tool[]>(
  props.tools || [
    {
      id: 1,
      name: 'Opera Neon',
      description: 'Opera浏览器Web Agent助手',
      icon: 'https://via.placeholder.com/50'
    },
    {
      id: 2,
      name: '投影客',
      description: 'PPT AI中心，可将思维导图转PPT',
      icon: 'https://via.placeholder.com/50'
    },
    {
      id: 3,
      name: '涂鸦Airy',
      description: 'ABC Mouse，即时绘画，内容丰富',
      icon: 'https://via.placeholder.com/50'
    },
    {
      id: 4,
      name: '魔法AI',
      description: '专注于一个全能的AI助手工具',
      icon: 'https://via.placeholder.com/50'
    }
  ]
)
</script>

<style lang="less" scoped>
.tools-section {
  margin-bottom: 32px;

  .section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: -10px;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 16px;
      background-color: #1890ff;
      border-radius: 2px;
    }
  }

  .tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
  }

  .tool-card {
    display: flex;
    padding: 16px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    position: relative;

    .tool-icon {
      width: 40px;
      height: 40px;
      margin-right: 12px;
      border-radius: 8px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .tool-info {
      flex: 1;

      .tool-name {
        font-size: 16px;
        font-weight: bold;
        margin: 0 0 4px;
      }

      .tool-desc {
        font-size: 12px;
        color: #666;
        margin: 0;
      }
    }

    &.new-tool {
      .tool-tag {
        position: absolute;
        top: 0;
        right: 0;
        background-color: #ff4d4f;
        color: #fff;
        font-size: 12px;
        padding: 2px 6px;
        border-radius: 0 8px 0 8px;
      }
    }
  }
}
</style>
